<template>
  <div class="tips" v-if="showDealDia">
    <div class="tips_content_wrapper animate__animated animate__zoomIn">
      <div class="tips_content">
        <slot></slot>
      </div>
      <img class="tipicon" src="../assets/img/ts.png" alt="">
    </div>
  </div>
</template>
<script>
import { Button } from 'vant'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  components: {
    [Button.name]: Button
  },
  data() {
    return {
    }
  },
  computed: {
    showDealDia: {
      get() {
        return this.value
      },
      set(val) {
        return val
      }
    }
  },
  methods: {
    handleOk() {
      this.$emit('ok')
      this.$emit('change', false)
    },
    handleCancel() {
      this.$emit('change', false)
    }
  },
  mounted() {
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
<style lang="less" scoped>
.tips {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.4);
  z-index: 6;
  .tips_content_wrapper {
    position: absolute;
    display: block;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    .tips_content {
      width: 72vw;
      min-height: 40vw;
      padding: 15px;
      box-sizing: border-box;
      background: url("../assets/img/tipsbg.png");
      background-size: 100% 100%;
    }
    .tipicon {
      width: 83px;
      height: auto;
      position: absolute;
      right: -22px;
    }
  }
}
</style>